<template>
  <!-- 操作栏 -->
  <div class="header">
    <div class="header-title">
      <svg-icon name="sort"></svg-icon>
      {{ $t('menus.Sort') }}
    </div>
    <div>
      <el-input
        v-model="queryForm.name"
        :placeholder="$t('btn.placeholder')"
        clearable
        :size="$store.getters.size"
        :prefix-icon="Search"
        class="header-input"
      ></el-input>
      <el-button
        type="primary"
        plain
        :icon="Search"
        :size="$store.getters.size"
        @click="initSortList"
        >{{ $t('btn.search') }}</el-button
      >
      <el-button
        type="primary"
        :icon="Plus"
        :size="$store.getters.size"
        @click="handleDialogValue()"
        >{{ $t('btn.add') }}</el-button
      >
    </div>
  </div>

  <!-- 表格数据 -->
  <div>
    <el-table
      :data="tableData"
      stripe
      border
      :size="$store.getters.size"
      style="width: 100%"
    >
      <!-- 序号 -->
      <el-table-column align="center" type="index" width="50" />
      <el-table-column
        header-align="center"
        :width="item.width"
        :align="item.align"
        :prop="item.prop"
        :label="$t(`table.${item.label}`)"
        v-for="(item, index) in options"
        :key="item.id"
      >
        <!-- 图标 -->
        <template v-slot="{ row }" v-if="item.prop === 'icon'">
          <el-image
            class="icon"
            :src="`${$common.apiUrl + row.icon}`"
            :preview-src-list="[$common.apiUrl + row.icon]"
            :preview-teleported="true"
          />
        </template>
        <!-- 操作 -->
        <template v-slot="{ row }" v-else-if="item.prop === 'action'">
          <el-button
            type="success"
            :icon="Connection"
            :size="$store.getters.size"
            @click="associatedData(row)"
          ></el-button>
          <el-button
            type="primary"
            :icon="Edit"
            :size="$store.getters.size"
            @click="handleDialogValue(row)"
          ></el-button>
          <el-button
            type="danger"
            :icon="Delete"
            :size="$store.getters.size"
            @click="delSort(row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="queryForm.page_num"
      :small="$store.getters.size === 'small' ? true : false"
      :page-size="queryForm.page_size"
      :page-sizes="pageSizes"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  <!-- 添加数据 或 修改数据 -->
  <Dialog
    v-model="dialogVisible"
    :dialogTitle="dialogTitle"
    v-if="dialogVisible"
    @initSortList="initSortList"
    :dialogTableValue="dialogTableValue"
  />
  <!-- 关联数据 -->
  <Drawer 
    v-model="drawerVisible" 
    :drawerTitle="drawerTitle" 
    v-if="drawerVisible" 
    :sortId="sortId"
  />
</template>
<script setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Plus,
  Search,
  Edit,
  Delete,
  Connection
} from '@element-plus/icons-vue'
import Dialog from './components/dialog.vue'
import Drawer from './components/drawer.vue'
import { options } from './options.js'
import { getSortList, deleteSort } from '@/api/sort.js'
import { isNull } from '@/utils/common.js'
import { useI18n } from 'vue-i18n'
const i18n = useI18n()

// 表格数据
const tableData = ref([])
// 总数
const total = ref(0)
// 搜索参数
const queryForm = ref({
  name: '',
  page_num: 1,
  page_size: 10
})
// 分页参数
const pageSizes = ref([20, 30, 40, 50, 100]) // 每页显示个数选择器的选项设置
const background = ref(true) // 是否为分页按钮添加背景色
// 新增数据 或 删除数据
const dialogVisible = ref(false)
const dialogTitle = ref('')
const dialogTableValue = ref({})

// 关联数据
const drawerVisible = ref(false)
const drawerTitle = ref('')
const sortId = ref(null)

// 加载分类数据
const initSortList = async () => {
  const res = await getSortList(queryForm.value)
  tableData.value = JSON.parse(JSON.stringify(res.data))
  total.value = res.total
}
initSortList()

// 新增数据 或 修改数据
const handleDialogValue = (row) => {
  if (isNull(row)) {
    dialogTitle.value = i18n.t('dialog.addData') //'新增分类'
    dialogTableValue.value = {}
  } else {
    dialogTitle.value = i18n.t('dialog.editData') //'编辑分类'
    dialogTableValue.value = JSON.parse(JSON.stringify(row))
  }
  dialogVisible.value = true
}

// 删除数据
const delSort = (row) => {
  ElMessageBox.confirm(i18n.t('dialog.deleteData'), i18n.t('dialog.tip'), {
    confirmButtonText: i18n.t('dialog.OK'), // OK
    cancelButtonText: i18n.t('dialog.Cancel'), // Cancel
    type: 'warning'
  })
    .then(async (res) => {
      const result = await deleteSort(row.id)
      initSortList()
      ElMessage({
        type: result.status === 0 ? 'success' : 'error',
        message:
          result.status === 0
            ? i18n.t('message.deleteSuccess')
            : i18n.t('message.deleteFailed')
      })
    })
    .catch((err) => {
      ElMessage({
        type: 'info',
        message: i18n.t('message.deleteCancel')
      })
    })
}

// 初始化每页显示数量
const initPageSizes = () => {
  pageSizes.value.unshift(queryForm.value.page_size)
}
initPageSizes()

// 修改每页显示数量
const handleSizeChange = (pageSize) => {
  queryForm.value.page_num = 1
  queryForm.value.page_size = pageSize
  initSortList()
}

// 修改页码
const handleCurrentChange = (pageNum) => {
  queryForm.value.page_num = pageNum
  initSortList()
}

// 关联数据
const associatedData = (row) => {
  drawerTitle.value = i18n.t('dialog.associatedData') + `(${ row.name })` //'关联数据'
  sortId.value = row.id
  drawerVisible.value = true
}
</script>

<style lang="scss" scoped>
@import './index.scss';
@import '@/styles/header.scss';
</style>
